<template>
  <div class="container">
    <div class="header">
      <h3 class="line" style="margin-left: 10px">历史记录</h3>
    </div>
    <div class="content">
      <div
        class="everydayrecord"
        v-for="(item, index) in this.istime"
        :key="index"
      >
        <p class="everydaytime">
          {{ `今天-${item.y}年${item.m}月${item.n}日` }}
        </p>
        <hr />
        <div class="detailedrecord">
          <p style="margin-left: 20px">{{ `此时是${item.n}日抽奖` }}</p>
          <div class="record" style="margin-top: -22px">
            <i
              class="iconfont icon-jilu"
              style="margin-left: 300px; color: green"
            ></i>
            <p style="margin-left: 5px">
              {{ `本次搞卫生的幸运儿就是：${item.t}` }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      record: [], //历史记录初始化为空
      istime: [], //存储历史记录
    };
  },
  mounted() {
    this.getRecord();
  },
  methods: {
    getRecord() {
      this.$http
        .get("history")
        .then((res) => {
          if (res.data.flag == 200) {
            this.record = res.data.userHis;
          } else {
            this.$XModal.danger("数据请求错误");
          }
          this.istime = this.getdate(res.data.userHis);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getdate(e) {
      const arr = [];
      for (let i = e.length-1; i >=0; i--) {
        let y = e[i].createTime.substring(0, 4);
        let m = e[i].createTime.substring(5, 7);
        let n = e[i].createTime.substring(8, 10);
        let t = e[i].history;
        let a = {};
        a.y = y;
        a.m = m;
        a.n = n;
        a.t = t;
        arr.push(a);
      }
      return arr;
    },
  },
};
</script>
<style lang="less">
.header {
  background-color: aliceblue;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px 0px;
  & .line {
    display: inline-block;
  }
}
.content {
  height: 600px;
  position: relative;
  overflow: auto;
}
.everydayrecord {
  margin-top: 20px;
  width: 100%;
  background-color: rgb(251, 252, 246);
  height: auto;
  padding-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px 2px;
  margin-bottom: 10px;
  & .everydaytime {
    margin-top: 15px;
    margin-left: 20px;
  }
}
.detailedrecord {
  & p {
    display: inline;
  }
}
</style>